import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{
		path: '/',
		name: 'Home',
		component: () => {
			console.log("页面已懒加载")
			return import('../views/Home.vue') //懒加载
		},
		meta: {
			isValidate: true
		},
		beforeEnter(to, from, next) {
			console.log("beforeEnter")
			next()
		}
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue'),
		meta: {
			isValidate: true
		}
	},
	{
		path: '/login',
		name: 'login',
		component: () => import('../views/login.vue'),		
		meta: {
			isValidate: false //路由验证
		}
	},
	{
		path: '/hhh/:id',
		name: 'hhh',
		component: () => import('../views/Home.vue'),
		meta: {
			isValidate: false
		},
		props:true
	}
]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})

/*

全局守卫： 全局前置守卫 beforeEach()， 全局解析守卫BeforeResolve()， 全局的后置守卫 beforeAfter()
每一次路由进入的时候都会去调用全局的前置守卫
to 目标路由  from上次路由
next() 是否切换路由导航， next() 路由会被往下传递，next(true)  如果不写next（） 或者写 next（false） 导航不会切换

*/

router.beforeEach((to, from, next) => {
	console.log("beforeEach")
	console.log(to,from)
	console.log(to.matched)
	if (to.matched.some(v => v.meta.isValidate)) {
		if (localStorage.getItem("isLoginSuccess")) {
			next()
		} else {
			next("/login")
		}
	} else {
		next()
	}
	
})

// 全局解析守卫 在beforeEach之后 执行在导航确认前，同时在组件内部的守卫和异步路由组件解析完成之后调用
router.beforeResolve((to, from, next) => {
	console.log("beforeResolve")
	next()
})


// 在到达目标路由之后调用全局的后置守卫，不需要进行next函数调用
router.afterEach((to, from) => {
	console.log("afterEach")
})

export default router
/*
   《完整的导航解析流程》

    导航被触发。
    如果离开页面=> beforeRouteLeave()
    全局 => beforeEach()
    如果页面被重复使用=> beforeRouteUpdate()
    进入新路由前(阶段一)=> beforeEnter()
	
    解析异步路由组件(含义模糊)
	
    进入新路由前(阶段二) => beforeRouteEnter()
    全局=> beforeResolve()
    导航被确认
    全局=> afterEach()
	
    触发 DOM 更新。
    调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

*/
